<template>
  <div class="app-container">
        <el-row :gutter="20" class="c-flex c-hidden">
          <el-col :span="24" :xs="24" class="c-flex c-height c-dis-flex-col c-hidden">
            <el-form :model="queryParam" ref="queryForm" :inline="true" label-width="100px" size="small">

              <el-form-item label="考试时间：" prop="dateRange" >
                <el-date-picker v-model="dateRange" style="width: 400px;"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :default-time="['00:00:00', '23:59:59']">
                </el-date-picker>
              </el-form-item>

              <el-form-item label="合格与否：" required>
                <el-select v-model="queryParam.passStatus" placeholder="合格与否" style="width: 100px;" clearable>
                  <el-option
                    v-for="dict in dict.type.exam_pass_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>


              <el-form-item label="考试名称：">
                <el-input v-model="queryParam.examMngName" clearable></el-input>
              </el-form-item>

              <el-form-item label="姓名：">
                <el-input v-model="queryParam.userName" clearable></el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="search">查询</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>

            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                  <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleExport">导出</el-button>
              </el-col>
            </el-row>

            <el-table v-loading="listLoading" :data="tableData" border fit highlight-current-row style="width: 100%">
              <el-table-column type="index" label="序号" align="center"  width="50">
                <template slot-scope="scope">
                  {{ (queryParam.pageNum - 1) * queryParam.pageSize + (scope.$index + 1) }}
                </template>
              </el-table-column>
              <el-table-column prop="examMngName" label="考试名称" align="center" min-width="120px" :show-overflow-tooltip="true"/>
              <el-table-column prop="userName" label="考试人员" align="center" min-width="120px" :show-overflow-tooltip="true"/>
              <el-table-column prop="userScore" label="考试成绩" align="center" min-width="120px" :show-overflow-tooltip="true"/>
              <el-table-column prop="passStatus" label="合格与否" align="center" min-width="120px" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.passStatus == '1'" type="success"><dict-tag :options="dict.type.exam_pass_type" :value="scope.row.passStatus"/></el-tag>
                <el-tag v-else type="error"><dict-tag :options="dict.type.exam_pass_type" :value="scope.row.passStatus"/></el-tag>
              </template>
              </el-table-column>
              <el-table-column prop="paperName" label="试卷名称" align="center" min-width="120px" :show-overflow-tooltip="true"/>
              <el-table-column prop="paperScore" label="试卷总分" align="center" min-width="120px" :show-overflow-tooltip="true"/>
              <el-table-column prop="passScore" label="合格分数" align="center" min-width="120px" :show-overflow-tooltip="true"/>
              <el-table-column prop="createTime" label="考试时间" width="160px"/>
              <el-table-column label="操作" align="center" width="260px">
                <template slot-scope="{ row }">
                  <router-link target="_blank" :to="{path:'/read',query:{id:row.id}}">
                    <el-button  type="text"  size="mini">查看试卷</el-button>
                  </router-link>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="queryParam.pageNum"
              :limit.sync="queryParam.pageSize"
              @pagination="search"
            />
          </el-col>
        </el-row>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import { pageListForAdmin } from "@/api/examPaperAnswer";
export default {
  components: { Pagination },
  dicts: ['exam_pass_type'],
  data() {
    return {
      queryParam: {
        id: null,
        level: null,
        subjectId: null,
        pageNum: 1,
        pageSize: 10,
        userName:null,
        passStatus:null
      },
      dateRange:[],
      subjectFilter: null,
      listLoading: false,
      tableData: [],
      total: 0,
      activeName: 'first'
    }

  },
  created() {
    this.search();
  },
  methods: {
    handleClick(tab, event) {
      this.search();
    },

    /**
     * 重置按钮
     */
    resetQuery() {
      this.queryParam= {
           id: null,
           examMngName:null,
           pageNum: 1,
           pageSize: 10
      },
      this.queryParam.pageNum = 1;
      this.dateRange=[]
      this.search();
    },

    search() {
      this.listLoading = true
      let _this = this;
      if(this.dateRange.length>1){
        this.queryParam.startTime = this.dateRange[0]
        this.queryParam.endTime = this.dateRange[1]
      }
      pageListForAdmin(this.queryParam).then((data) => {
        this.tableData = data.rows
        this.total = data.total
        this.listLoading = false
      }).catch(() => {
          this.listLoading = false
        })
    },

    /** 导出按钮操作 */
    handleExport() {
      if(this.dateRange.length>1){
        this.queryParam.startTime = this.dateRange[0]
        this.queryParam.endTime = this.dateRange[1]
      }
      this.download('api/student/exampaper/answer/export', {
        ...this.queryParam
      }, `考试记录_${new Date().getTime()}.xlsx`)
    }
  }
}
</script>
